import React, { useState } from 'react';

import { Button, Space } from 'dw-mx';
import { Modal } from 'dw-mx';

import Type2Child from './Type2Child';

export default function HeightControl() {

    const [modal1, updateModal] = useState({
        open: false,
        props: {}
    });

    const [modal2, updateModa2] = useState({
        open: false,
        props: {}
    });

    const openModal1 = async () => {
        updateModal({
            open: true,
            props: {
                xm: '小明',
                age: 18
            }
        });
    };
    const closeModal1 = async (ret) => {
        updateModal({
            open: false,
            props: {}
        });

        alert(ret);
    };

    const openModal2 = async () => {
        updateModa2({
            open: true,
            props: {
                xm: '小明',
                age: 18
            }
        });
    };
    const closeModal2 = async (ret) => {
        updateModa2({
            open: false,
            props: {}
        });

        alert(ret);
    };

    return <div>
        宽度控制：
        <ul>
            <li>
                Modal 的宽度通过 width 属性配置
                <ul>
                    <li>支持固定像素</li>
                    <li>支持百分比</li>
                </ul>
            </li>
        </ul>

        高度控制：
        <ul>
            <li>
                Modal 的高度可不配置，自适应内容（这种场景，应该是绝大多数场景）
            </li>
            <li>
                如果想指定 Modal 的高度：
                <ul>
                    <li>将 className 配置为 dw-mx-modal </li>
                    <li>用 style 的 height 配置高度</li>
                </ul>
            </li>
        </ul>

        {
            modal1.open && (
                <Modal
                    title="人员信息"
                    visible={true}
                    onOk={() => closeModal1('ok')}
                    onCancel={() => closeModal1('cancel')}
                    width={"40%"}
                    centered={true} maskClosable={false}
                >
                    <Type2Child {...modal1.props}></Type2Child>
                </Modal>
            )
        }

        {
            modal2.open && (
                <Modal
                    className={"dw-mx-modal"}
                    title="人员信息"
                    visible={true}
                    onOk={() => closeModal2('ok')}
                    onCancel={() => closeModal2('cancel')}
                    width={"40%"}
                    style={{height: "40%"}}
                    centered={true} maskClosable={false}
                >
                    <Type2Child {...modal2.props}></Type2Child>
                </Modal>
            )
        }

        <Space>
            <Button onClick={() => openModal1()}>宽度指定40%、高度自适应内容</Button>
            <Button onClick={() => openModal2()}>宽度指定40%、高度指定40%</Button>
        </Space>
    </div>;
}